/*
 * @Author: Zhang Kai
 * @Date: 2021-12-16 17:06:54
 * @LastEditors: mayijun
 * @LastEditTime: 2022-05-09 15:41:19
 * @FilePath: /metricsx-standard-ui/src/components/DimensionSelect/index.tsx
 */
import { ElMessage } from 'element-plus/lib/index';
import {
  computed,
  defineComponent,
  reactive,
  ref,
  watch,
  onMounted
} from 'vue';
import ArithmeticDetail from '@/components/Arithmetic/components/ArithmeticDetail';
import '@/components/DimensionSelect/index.scss';
import API from '@/services';
const dimensionSelect = defineComponent({
  name: 'DimensionSelect',
  props: {
    dialogVisible: {
      type: Boolean
    }
  },
  emits: ['dimensionChange', 'update:dialogVisible', 'optionChange', 'remote'],
  setup: (props, { slots, attrs, emit }) => {
    const currentDimension = ref();

    /* 维度下拉list */
    const dimensionList: any = ref([]);

    let currentItem = reactive({});

    const num = ref(0);

    const dialogVisibles = computed({
      get: () => props.dialogVisible,
      set: (v) => emit('update:dialogVisible', v)
    });

    /* 获取维度下拉列表 */
    const getDimensionList = async (cnName?: string) => {
      try {
        const { code, data } = await API.dimension.getDimensionHintName({
          cnName
        });
        if (code === 200 && Array.isArray(data)) {
          dimensionList.value = data;
        }
      } catch (error) {
        console.log(error);
      }
    };

    const formatDetail = (v: any) => {
      return [
        {
          label: '基本信息',
          value: [
            `主题：${v?.subjectName}`,
            `英文名称：${v?.enName}`,
            `创建人：${v?.createBy}`,
            `创建时间：${v?.createTime}`
          ]
        },
        {
          label: '维度信息',
          value: v.description
        }
      ];
    };

    watch(
      () => props?.dialogVisible,
      (bol) => {
        bol && getDimensionList();
      }
    );

    onMounted(() => {});

    return () => {
      const { dialogVisible } = props;
      return (
        <el-dialog
          customClass="dimension-dialog"
          v-model={dialogVisible}
          title="选择维度"
          width="570px"
          onClose={() => {
            dialogVisibles.value = false;
            currentDimension.value = '';
          }}
          v-slots={{
            footer: () => (
              <>
                <el-button
                  onClick={() => {
                    dialogVisibles.value = false;
                  }}
                >
                  取消
                </el-button>
                <el-button
                  onClick={() => {
                    if (!currentDimension.value) {
                      ElMessage.warning('请选择维度');
                      return;
                    }
                    emit('dimensionChange', currentItem);
                    dialogVisibles.value = false;
                  }}
                  type="primary"
                >
                  确定
                </el-button>
              </>
            )
          }}
        >
          <el-select
            size="large"
            popper-class="dimention-select"
            filterable
            remote={true}
            v-model={currentDimension.value}
            remote-method={(content: string) => getDimensionList(content)}
            placeholder="请选择维度"
          >
            {dimensionList.value?.map((v: any, i: number) => {
              return (
                <el-popover
                  popper-class="selectIndex_popper"
                  placement="left-start"
                  title={v?.cnName}
                  width="200"
                  trigger="hover"
                  v-slots={{
                    reference: () => (
                      <el-option
                        label={v.cnName}
                        value={v.id}
                        onClick={() => (currentItem = v)}
                      ></el-option>
                    )
                  }}
                >
                  <ArithmeticDetail list={formatDetail(v)} />
                </el-popover>
              );
            })}
          </el-select>
          <el-button
            style={{ marginLeft: '10px' }}
            onClick={() =>
              window.open(
                `${
                  process.env.VUE_APP_PUBLICPATH === '/'
                    ? ''
                    : process.env.VUE_APP_PUBLICPATH
                }/#/index-manage/dimension?modal=1`
              )
            }
            type="text"
          >
            + 新建维度
          </el-button>
        </el-dialog>
      );
    };
  }
});
export default dimensionSelect;
